<script setup>
import { queryPolicyInfo } from '@/api/comprehensive'
import { ref, computed } from 'vue'
const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  },
  isEyeOpen: {
    type: Boolean
  },
  activeIndex: {
    type: [String, Number],
    default: ''
  },
  insuredId: {
    type: [String, Number],
    default: ''
  },
  policyYearList: {
    type: Array,
    default: () => []
  },
  //兼容个人主页，不需要点击时再获取列表的情况
  requireGetYearList: {
    type: Boolean,
    default: true
  }
})
const yearList = ref([])
const activeKey = ref(0)
const emit = defineEmits(['updateCustomInfo'])
const yearDetailData = computed(() => {
  return yearList.value[activeKey.value]
})
function showYearDetail(index) {
  activeKey.value = index
}

const visible = ref(false)
function tabClick(key) {
  const selectYearInfo = yearList.value[key]
  emit('updateCustomInfo', selectYearInfo)
  visible.value = false
}
function getPopupContainer(triggerNode) {
  return triggerNode.parentNode
}

async function getYearList() {
  let res = null
  spinning.value = true
  const data = {
    desensitization: props.isEyeOpen ? '02' : '01',
    doc_id: props.info.doc_id
  }
  try {
    res = await queryPolicyInfo(data)
  } catch (err) {
  } finally {
    spinning.value = false
  }
  if (res?.isSuccess) {
    yearList.value = res.data
    activeKey.value = yearList.value.findIndex((year) => year.insuredId == props.info.insuredId)
  }
}
let spinning = ref(false)

function openChange(val) {
  yearList.value = []
  if (val && props.requireGetYearList) {
    getYearList()
  } else {
    yearList.value = props.policyYearList
    activeKey.value = yearList.value.findIndex((year) => year.insuredId == props.info.insuredId)
  }
}
</script>
<template>
  <a-popover
    :getPopupContainer="getPopupContainer"
    v-model:open="visible"
    placement="bottom"
    trigger="click"
    :destroyTooltipOnHide="true"
    @openChange="openChange"
  >
    <template #content>
      <a-spin :spinning="spinning">
        <a-tabs
          size="small"
          v-model:activeKey="activeKey"
          :tabBarGutter="0"
          :destroyInactiveTabPane="true"
          class="year-tabs"
          tab-position="left"
          :style="{ height: '240px' }"
          @tabClick="tabClick"
        >
          <a-tab-pane v-for="(yearItem, index) in yearList" :key="index">
            <template #tab>
              <span @mouseover="showYearDetail(index)"> {{ yearItem.policyYear }} </span>
            </template>
            <a-descriptions
              :column="1"
              :labelStyle="{ color: '#666' }"
              :contentStyle="{ color: '#333', fontWeight: 600 }"
            >
              <a-descriptions-item :label="$t('home.yearPopover.Status')">{{
                yearDetailData.enrollmentStatus
              }}</a-descriptions-item>
              <a-descriptions-item :label="$t('home.yearPopover.VIPLv')">{{
                yearDetailData.vipFlag
              }}</a-descriptions-item>
              <a-descriptions-item :label="$t('home.yearPopover.PolicyYr')">{{
                yearDetailData.policyYear
              }}</a-descriptions-item>
              <a-descriptions-item :label="$t('home.yearPopover.Validity')">
                {{ `${yearDetailData.insuredEffectiveDate} ~ ${yearDetailData.insuredExpireDate}` }}
              </a-descriptions-item>
              <a-descriptions-item :label="$t('home.yearPopover.Type')">{{
                yearDetailData.planTypeEName
              }}</a-descriptions-item>
            </a-descriptions></a-tab-pane
          >
        </a-tabs>
      </a-spin>
    </template>
    <slot></slot>
  </a-popover>
</template>
<style lang="scss">
.year-tabs {
  .ant-tabs-nav .ant-tabs-tab {
    padding: 8px 0 !important;
    width: 40px;
  }
  .ant-tabs-content-holder {
    width: 310px;
  }
  .ant-tabs-nav-operations {
    display: none !important;
  }
}
</style>
